<template>
  <div>
    <div class="body">
      <div class="loading"><i class="el-icon-loading"></i></div>
      <div class="jsT" :style="{ backgroundImage: 'url(' + imgs[index] + ')' }">
        <div class="la lr" @click="ji">{{ "<" }}</div>
            <div class="ra lr" @click="ze">{{ ">" }}</div>
        </div>
        <div class="zsk">
          <div class="sc">{{ scene }}</div>
          <div class="ms">{{ description }}</div>
          <div class="lc">
            <i class="el-icon-map-location"></i>
            <div class="jlc">{{ location }}</div>
          </div>
          <div class="setPointBtnContainer">
            <el-button type="success" class="setPointBtn" v-if="visited">已去过</el-button>
            <el-button type="primary" class="setPointBtn" v-else @click="visitedScene()">标记为去过</el-button>
          </div>
        </div>
        <div class="zsk">
          <div class="yhz">服务设施</div>
          <div class="yh1" v-for="(serviceFacility, index) in serviceFacilities" :key="index">
            *{{ serviceFacility }}
          </div>
          <div class="yh1" v-if="serviceFacilities.length == 0">
            暂无该信息
          </div>
        </div>
        <div class="km">
          <div class="kt">
            <div class="kfw">开放时间:</div>
            <div class="jts">
              <div class="jts1" v-for="(openTime1, index) in openTimes" :key="index">
                {{ openTime1 }}
              </div>
              <div class="jts1" v-if="openTimes.length == 0">
                暂无该信息
              </div>
            </div>
          </div>
          <div class="mp">
            <div class="mpx">门票信息:</div>
            <div class="jtx">{{ tickMessage }}</div>
            <div class="jtx" v-if="tickMessage == '' || tickMessage == undefined">暂无该信息</div>
          </div>
        </div>
        <div class="zsk">
          <div class="yhz">优惠政策</div>
          <div class="yh1" v-for="(
            preferentialTreatmentPolicy1, index
          ) in preferentialTreatmentPolicy" :key="index">
            *{{ preferentialTreatmentPolicy1 }}
          </div>
          <div class="yh1" v-if="preferentialTreatmentPolicy.length == 0">
            暂无该信息
          </div>
        </div>
        <div class="dh">
          <div class="dht">
            <div id="map" style="height: 100%;"></div>
          </div>
          <div class="dha" @click="
        $router.push(
          `/home/navigationPage/${userId}/${scene}/${city}`
        )
        ">
            导航
          </div>
        </div>
        <div class="ckf">
          <div class="fjw">查看附近</div>
          <div class="tjl">
            <div class="ztj ztj1" @click="bs1">景点</div>
            <div class="ztj ztj2" @click="bs2">美食</div>
            <div class="ztj ztj3" @click="bs3">购物</div>
          </div>
          <div class="zsl" v-if="sign == 1">
            <div class="zsl1 rs" v-for="(scene1, index) in scenes" :key="index" @click="tjj(index)">
              <div class="nw">{{ scene1.name }}</div>
              <div class="rj">
                <i class="el-icon-location"></i>{{ scene1.distance }}
              </div>
              <div class="jdp" :style="{ backgroundImage: 'url(' + scene1.url + ')' }"></div>
            </div>
          </div>
          <div class="zsl" v-if="sign == 2">
            <div class="zsl1 jd" v-for="(restaurant, index) in restaurants" :key="index" @click="
        $router.push(
          `/home/foodPage/${restaurant.name}/${userId}/${city}`
        )
        ">
              <div class="nw">{{ restaurant.name }}</div>
              <div class="rj">
                <i class="el-icon-location"></i>{{ restaurant.distance }}
              </div>
              <div class="jdp" :style="{ backgroundImage: 'url(' + restaurant.url + ')' }"></div>
            </div>
          </div>
          <div class="zsl" v-if="sign == 3">
            <div class="zsl1 shc" v-for="(shop, index) in shops" :key="index" @click="
        $router.push(`/home/shopPage/${shop.name}/${userId}/${city}`)
        ">
              <div class="nw">{{ shop.name }}</div>
              <div class="rj">
                <i class="el-icon-location"></i>{{ shop.distance }}
              </div>
              <div class="jdp" :style="{ backgroundImage: 'url(' + shop.url + ')' }"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pn">
        <div class="pnw">联系电话:</div>
        <div class="pn1" v-for="(phoneNumber1, index) in phoneNumbers" :key="index">
          <i class="el-icon-phone-outline"></i>{{ phoneNumber1 }}
        </div>
        <div class="pn1" v-if="phoneNumber == '' || phoneNumber == undefined">
          暂无该信息
        </div>
      </div>
    </div>
</template>
<script>
import axios from "axios";
import { BMPGL } from "../../../bmpgl.js"
export default {
  data() {
    return {
      ak: "7lZ559WeX7j6Fyg2ykx4U1rlsgK1RSJp",
      userId: this.$route.params.userId,
      userName: "",
      txUrl: "",
      scene: this.$route.params.scene,
      sceneID: this.$route.params.sceneID,
      imgs: [],
      location: "",
      city: this.$route.params.city,
      description: "",
      tickMessage: "",
      openTime: [],
      visited: false,
      openTimes: [],
      previousElement: null,
      sign: 1,
      scenes: [],
      restaurants: [],
      shops: [],
      preferentialTreatmentPolicy: [],
      serviceFacilities: [],
      phoneNumber: "",
      phoneNumbers: [],
      index: 0,
      coordinate: {},
      isMounted: false
    };
  },
  methods: {
    hqy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/userMessage/get",
        headers: {
          "Content-Type": "application/json",
          "token": localStorage.getItem("JWT_TOKEN"),
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          _this.userName = response.data.data.username;
          _this.txUrl = response.data.data.txUrl;
          const param1 = _this.userId;
          const param2 = _this.txUrl;
          const param3 = _this.$route.name;
          const param4 = _this.userName;
          _this.$emit("childEvent", { param1, param2, param3, param4 });
        })
        .catch((error) => {
          console.log(error);
        });
    },
    jzy() {
      let _this = this;
      const axios = require("axios");
      let data = JSON.stringify({
        "userID": _this.userId,
        "scene": _this.scene,
        "sceneID": _this.sceneID,
        "city": _this.city
      });
      let config = {
        method: "post",
        maxBodyLength: Infinity,
        url: "http://8.134.215.31:11112/concreteScene/get",
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      };
      axios
        .request(config)
        .then((response) => {
          console.log(response.data);
          _this.imgs = response.data.data.imgs;
          _this.location = response.data.data.location;
          _this.description = response.data.data.description;
          _this.tickMessage = response.data.data.tickMessage;
          _this.openTime = response.data.data.openTime;
          _this.scenes = response.data.data.scenes;
          _this.restaurants = response.data.data.restaurants;
          _this.shops = response.data.data.shops;
          _this.preferentialTreatmentPolicy = response.data.data.preferentialTreatmentPolicies;
          _this.serviceFacilities = response.data.data.serviceFacilities;
          _this.phoneNumber = response.data.data.phoneNumber;
          _this.coordinate.longitude = response.data.data.coordinate.longitude;
          _this.coordinate.latitude = response.data.data.coordinate.latitude;
          _this.visited = response.data.data.visited;

          _this.qg();
          document.querySelector('.loading').style.display = "none";
          this.initMap();
          this.isMounted = true;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    bs1() {
      if (this.previousElement != null) {
        this.previousElement.style.backgroundColor = "white";
        this.previousElement.style.color = "black";
      }
      document.querySelector(".ztj1").style.backgroundColor =
        "rgba(74, 82, 89)";
      document.querySelector(".ztj1").style.color = "pink";
      this.previousElement = document.querySelector(".ztj1");
      this.sign = 1;
    },
    bs2() {
      if (this.previousElement != null) {
        this.previousElement.style.backgroundColor = "white";
        this.previousElement.style.color = "black";
      }
      document.querySelector(".ztj2").style.backgroundColor =
        "rgba(74, 82, 89)";
      document.querySelector(".ztj2").style.color = "pink";
      this.previousElement = document.querySelector(".ztj2");
      this.sign = 2;
    },
    bs3() {
      if (this.previousElement != null) {
        this.previousElement.style.backgroundColor = "white";
        this.previousElement.style.color = "black";
      }
      document.querySelector(".ztj3").style.backgroundColor =
        "rgba(74, 82, 89)";
      document.querySelector(".ztj3").style.color = "pink";
      this.previousElement = document.querySelector(".ztj3");
      this.sign = 3;
    },
    tjj(index) {
      if (this.scenes[index].sceneID == 0) {
        this.$notify.info({
          title: "消息",
          message: "暂无该景点详情",
        });
      } else
        this.$router.replace(
          `/home/concreteScene/${this.scenes[index].name}/${this.userId}/${this.scenes[index].sceneID}/${this.scenes[index].city}`
        );
    },
    getScrollTop() {
      return (
        (document.documentElement && document.documentElement.scrollTop) ||
        document.body.scrollTop
      );
    },
    scrollToTop() {
      const scrollTop = this.getScrollTop();
      if (scrollTop > 0) {
        window.requestAnimationFrame(this.scrollToTop);
        window.scrollTo(0, scrollTop - scrollTop / 16);
      }
    },
    qg() {
      if (this.openTime[0] != undefined)
        this.openTimes = this.openTime[0].split(";");
      if (this.phoneNumber != undefined)
        this.phoneNumbers = this.phoneNumber.split(",");
    },
    ji() {
      if (this.index == 0) this.index = this.imgs.length - 1;
      else this.index--;
    },
    ze() {
      if (this.index == this.imgs.length - 1) this.index = 0;
      else this.index++;
    },
    initMap() {
      // 传入密钥获取地图回调。
      BMPGL(this.ak).then((BMapGL) => {
        // 创建地图实例
        let map = new BMapGL.Map("map");
        // 创建点坐标 axios => res 获取的初始化定位坐标
        var point = new BMapGL.Point(this.coordinate.longitude, this.coordinate.latitude);
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 18)
        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        // map.setHeading(64.5)
        // map.setTilt(73)
        // 保存数据
        // this.myMap = map
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);
        let that = this
        marker.addEventListener("click", function () {
          var opts = {
            width: 100,     // 信息窗口宽度
            height: 60,    // 信息窗口高度
            title: that.scene  // 信息窗口标题
          }
          var infoWindow = new BMapGL.InfoWindow(that.location, opts);  // 创建信息窗口对象
          map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口       
        })            // 将标注添加到地图中
      })
        .catch((err) => {
          console.log(err)
        })
    },
    visitedScene() {
      axios.request({
        method: 'post',
        maxBodyLength: Infinity,
        url: 'http://8.134.215.31:11112/scene/visit',
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          "userID": parseInt(this.userId),
          "sceneID": parseInt(this.sceneID),
          "city": this.city
        }
      })
        .then((response) => {
          this.visited = true;
          this.$notify.success({
            title: "消息",
            message: "已标记为去过",
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
    document.querySelector(".ztj1").style.backgroundColor = "rgba(74, 82, 89)";
    document.querySelector(".ztj1").style.color = "pink";
    this.previousElement = document.querySelector(".ztj1");
    this.hqy();
    this.jzy();
    this.qg();

  },
  watch: {
    $route() {
      this.userId = this.$route.params.userId;
      this.scene = this.$route.params.scene;
      this.sceneID = this.$route.params.sceneID;
      this.city = this.$route.params.city;
      this.jzy();
      document.querySelector(".ztj1").style.backgroundColor =
        "rgba(74, 82, 89)";
      document.querySelector(".ztj1").style.color = "pink";
      this.previousElement = document.querySelector(".ztj1");
      const param1 = this.userId;
      const param2 = this.txUrl;
      const param3 = this.$route.name;
      const param4 = this.userName;
      this.$emit("childEvent", { param1, param2, param3, param4 });
      this.scrollToTop();
    },
  },
};
</script>
<style scoped>
.body {
  user-select: none;
  overflow: hidden;
  margin: 0 auto;
  width: 60%;
  min-height: 1000px;
  height: auto;
}

.loading {
  position: fixed;
  left: 50%;
  top: 700px;
  color: white;
  background-color: grey;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: -25px;
}

.jsT {
  position: relative;
  margin: 50px auto;
  width: 90%;
  height: 500px;
  background-size: 100% 100%;
  background-color: pink;
}

.la {
  position: absolute;
  left: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.ra {
  position: absolute;
  right: 3%;
  top: 50%;
  width: 50px;
  height: 10%;
  margin-top: -25px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  color: white;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}

.lr:hover {
  background-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lr:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.zsk {
  overflow: auto;
  position: relative;
  margin: 20px auto;
  margin-top: 0px;
  width: 85%;
  min-height: 240px;
  height: auto;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.zsk::-webkit-scrollbar {
  width: 12px;
}

.zsk::-webkit-scrollbar-track {
  background-color: rgba(74, 82, 89);
  border-radius: 5px;
}

.zsk::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 6px;
}

.yhz {
  width: 92%;
  margin: 7px auto;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
}

.yh1 {
  width: 92%;
  height: auto;
  margin: 0 auto;
  font-size: 15px;
  margin-bottom: 10px;
}

.sc {
  position: absolute;
  top: 34.5px;
  left: 5%;
  height: 46px;
  width: 60%;
  line-height: 46px;
  font-size: 25px;
  font-weight: 600;
}

.ms {
  position: absolute;
  top: 115px;
  left: 5%;
  min-height: 115px;
  height: auto;
  width: 90%;
  word-wrap: break-word;
  font-size: 18px;
}

.lc {
  position: absolute;
  top: 80px;
  left: 5%;
  height: 46px;
  width: 50%;
  font-size: 15px;
}

.jlc {
  position: absolute;
  left: 6%;
  width: 94%;
  height: 100%;
  word-wrap: break-word;
}

.el-icon-map-location {
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 6%;
  font-size: 20px;
}

.km {
  display: flex;
  margin: 20px auto;
  margin-top: 0px;
  width: 85%;
  height: 230px;
  justify-content: space-between;
}

.kt {
  position: relative;
  height: 100%;
  width: 65%;
  border-radius: 10px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.kfw {
  position: absolute;
  left: 7%;
  top: 15%;
  width: 20%;
  height: 20%;
  line-height: 46px;
  font-size: 17px;
  font-weight: 700;
}

.jts {
  position: absolute;
  left: 7%;
  top: 35%;
  width: 93%;
  height: 60%;
  word-wrap: break-word;
  font-size: 17px;
}

.jts1 {
  width: 100%;
  height: 15%;
}

.mp {
  position: relative;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.mpx {
  position: absolute;
  height: 20%;
  width: 50%;
  left: 5%;
  top: 12%;
  line-height: 46px;
  font-size: 17px;
  font-weight: 700;
}

.jtx {
  position: absolute;
  height: 66%;
  width: 85%;
  left: 5%;
  top: 32%;
}

.dh {
  margin: 50px auto;
  width: 85%;
  height: 600px;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.dht {
  margin: 30px auto;
  width: 86%;
  height: 75%;
  /*background-color: pink;*/
}

.dha {
  margin: 10px auto;
  width: 30%;
  height: 10%;
  background-color: rgba(128, 128, 128, 0.635);
  color: white;
  line-height: 60px;
  text-align: center;
  font-size: 25px;
  border-radius: 20px;
}

.dha:hover {
  background-color: grey;
  color: pink;
  cursor: pointer;
}

.dha:active {
  background-color: rgba(128, 128, 128, 0.635);
}

.ckf {
  overflow: hidden;
  margin: 50px auto;
  width: 85%;
  min-height: 600px;
  height: auto;
  border: 1px rgba(128, 128, 128, 0.4) solid;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

.fjw {
  height: 110px;
  width: 100%;
  line-height: 110px;
  text-indent: 1.5em;
  font-size: 25px;
  font-weight: 700;
}

.tjl {
  overflow: hidden;
  display: flex;
  margin: 0 auto;
  width: 90%;
  height: 55px;
  box-sizing: border-box;
  justify-content: space-between;
  border-top: 1px rgba(0, 132, 255, 0.893) solid;
  border-bottom: 1px rgba(0, 132, 255, 0.893) solid;
  border-left: 1px rgba(0, 132, 255, 0.893) solid;
  border-radius: 3px;
}

.ztj {
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  border-right: 1px rgba(0, 132, 255, 0.893) solid;
  line-height: 55px;
  text-align: center;
  font-size: 22px;
}

.ztj:hover {
  cursor: pointer;
}

.zsl {
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 1px;
  margin-bottom: 10px;
  width: 90%;
  height: auto;
  min-height: 400px;
  border: 1px rgba(128, 128, 128, 0.607) solid;
}

.zsl:hover {
  cursor: pointer;
}

.zsl1 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 140px;
  border-bottom: 1px rgba(128, 128, 128, 0.603) solid;
}

.nw {
  position: absolute;
  width: 60%;
  height: 35%;
  top: 15%;
  left: 3%;
  line-height: 49px;
  font-size: 25px;
}

.rj {
  position: absolute;
  width: 30%;
  height: 24%;
  top: 60%;
  left: 3%;
  line-height: 34px;
  font-size: 17px;
}

.jj {
  position: absolute;
  width: 28%;
  height: 24%;
  top: 60%;
  left: 46%;
  line-height: 34px;
  font-size: 17px;
}

.jdp {
  position: absolute;
  width: 22%;
  height: 90%;
  top: 5%;
  right: 2%;
  background-color: pink;
  background-size: 100% 100%;
}

.el-icon-s-finance {
  height: 100%;
}

.el-icon-location {
  height: 100%;
}

.el-icon-knife-fork {
  height: 100%;
}

.el-icon-shopping-cart-full {
  height: 100%;
}

.pn {
  overflow: hidden;
  position: fixed;
  top: 50%;
  right: 7%;
  width: 12%;
  min-height: 80px;
  height: auto;
  background-color: rgba(74, 82, 89);
  color: white;
  border-radius: 5px;
}

.pnw {
  height: 30px;
  line-height: 30px;
  width: 90%;
  margin: 0 auto;
  font-weight: 500;
}

.pn1 {
  min-height: 30px;
  height: auto;
  margin: 0 auto;
  width: 90%;
}

.setPointBtnContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.setPointBtn {
  position: relative;
  top: 34.5px;
  right: 20px;
}
</style>